<template>
  <a-drawer
    title="角色信息"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="roleInfoVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
      <p><a-icon type="crown" />&nbsp;&nbsp;角色名称：{{roleInfoData.name}}</p>
      <p :title="roleInfoData.remark"><a-icon type="book" />&nbsp;&nbsp;角色描述：{{roleInfoData.remark}}</p>
      <p><a-icon type="clock-circle" />&nbsp;&nbsp;创建时间：{{roleInfoData.createTime}}</p>
      <p><a-icon type="clock-circle" />&nbsp;&nbsp;修改时间：{{roleInfoData.updateTime? roleInfoData.updateTime : '暂未修改'}}</p>
      <p><a-icon type="trophy" />&nbsp;&nbsp;所拥有的权限：
        <a-tree
          :key="menuTreeKey"
          ref="menuTree"
          :checkable="true"
          :checkStrictly="checkStrictly"
          :defaultCheckedKeys="defaultCheckedKeys[0]"
          @expand="handleExpand"
          :expandedKeys="expandedKeys"
          :treeData="menuTreeData">
        </a-tree>
      </p>
  </a-drawer>
</template>
<script>
  import {api} from '@/api'
export default {
  name: 'RoleInfo',
  props: {
    roleInfoVisiable: {
      require: true,
      default: false
    },
    roleInfoData: {
      require: true
    }
  },
  data () {
    return {
      loading: true,
      menuTreeKey: +new Date(),
      menuTreeData: [],
      allTreeKeys: [],
      checkedKeys: [],
      defaultCheckedKeys: [],
      expandedKeys: [],
      checkStrictly: true
    }
  },
  methods: {
    close () {
      this.$emit('close')
      this.checkedKeys = []
    },
    handleExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    }
  },
  watch: {
    roleInfoVisiable () {
      console.dir(this.roleInfoVisiable)
      if (this.roleInfoVisiable) {
        // this.$api.role.info(this.roleInfoData.id).then((r) => {
        //   console.log(r)
        //   console.log(this.roleInfoData)
          // this.menuTreeData = r.data.rows.children
          // this.$get('role/menu/' + this.roleInfoData.roleId).then((r) => {
          //   let length = this.checkedKeys.length
          //   this.checkedKeys.splice(0, length, r.data)
          //   this.key = +new Date()
          // })
        // })
        api.menu.list().then((r) => {
          this.menuTreeData = r.data.rows.children
          this.allTreeKeys = r.data.ids
          api.menu.findByRoleId(this.roleInfoData.id).then((r) => {
            this.defaultCheckedKeys.splice(0, this.defaultCheckedKeys.length, r.data)
            this.checkedKeys = r.data
            this.menuTreeKey = +new Date()
          })
          this.expandedKeys = this.allTreeKeys
        })
      }
    }
  }
}
</script>
